<template>
  <div class="d-flex justify-content-center">
    <div class="col-8">
      <div v-if="user">
        <h2 class="jh-entity-heading">
          <span>{{ t$('userManagement.detail.title') }}</span> [<strong>{{user.login}}</strong>]
        </h2>
        <dl class="row-md jh-entity-details">
          <dt><span>{{ t$('userManagement.login') }}</span></dt>
          <dd>
            <span>{{ user.login }}</span>
            <b-badge style="margin-left: 10px;" :variant="user.activated ? 'success' : 'danger'">{{ t$(user.activated ? 'userManagement.activated' : 'userManagement.deactivated') }}</b-badge>
          </dd>
          <dt><span>{{ t$('userManagement.firstName') }}</span></dt>
          <dd>{{user.firstName}}</dd>
          <dt><span>{{ t$('userManagement.lastName') }}</span></dt>
          <dd>{{user.lastName}}</dd>
          <dt><span>{{ t$('userManagement.email') }}</span></dt>
          <dd>{{user.email}}</dd>
<%_ if (enableTranslation) { _%>
          <dt><span>{{ t$('userManagement.langKey') }}</span></dt>
          <dd>{{user.langKey}}</dd>
<%_ } _%>
          <dt><span>{{ t$('userManagement.createdBy') }}</span></dt>
          <dd>{{user.createdBy}}</dd>
          <dt><span>{{ t$('userManagement.createdDate') }}</span></dt>
          <dd>
            <span v-if="user.createdDate">
              {{formatDate(user.createdDate)}}
            </span>
          </dd>
          <dt><span>{{ t$('userManagement.lastModifiedBy') }}</span></dt>
          <dd>{{user.lastModifiedBy}}</dd>
          <dt><span>{{ t$('userManagement.lastModifiedDate') }}</span></dt>
          <dd>
            <span v-if="user.lastModifiedDate">
                {{formatDate(user.lastModifiedDate)}}
            </span>
          </dd>
          <dt><span>{{ t$('userManagement.profiles') }}</span></dt>
          <dd>
            <ul class="list-unstyled">
              <li v-for="authority of user.authorities" :key="authority">
                <b-badge variant="info">{{authority}}</b-badge>
              </li>
            </ul>
          </dd>
        </dl>
        <router-link custom v-slot="{ navigate }"
                :to="{name: '<%= jhiPrefixCapitalized %>User'}">
          <button @click="navigate" class="btn btn-info">
            <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>{{ t$('entity.action.back') }}</span>
          </button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./user-management-view.component.ts"></script>
